<template>
	<view class="page">
		<div class="page-header">
			<o-navbar :isBack="false" :isFixed="true" :background="{ backgroundColor: '#214a75' }">
				<div slot="content" style="color: #fff;font-weight: bold; ">我的</div>

				<div class="news-tip" style="padding-left: 20rpx;" slot="right"
					@tap="$wanlshop.auth('/pages/notice/notice')">
					<div class="news-wraper">
						<image src="https://zm.zonmay.com/public/static/image/icons/news.png"></image>
						<template v-if="unread_msg_num > 0">
							<div class="red-tips"></div>
						</template>
					</div>
				</div>
			</o-navbar>
			<div class="info">
				<view class="via"
					:style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar, 35, 35, 2, 'avatar') + ')' }"></view>
				<div class="user" v-if="token" @tap="$wanlshop.auth('/pages/user/setting/user')">
					<div class="user-name">{{ nickname }}</div>
					<div class="user-grade">{{ user_level_name }}</div>
					<div class="arrow">
						<image src="https://zm.zonmay.com/public/static/image/icons/arrow_right.png" alt="" />
					</div>
				</div>
				<div class="login" v-else  @tap="register">
					<div class="user-login">请登录</div>
					<div class="arrow">
						<image src="https://zm.zonmay.com/public/static/image/icons/arrow_right.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="order">
			<div class="cell-item">
				<div class="title">我的订单</div>
				<div class="right" @tap="$wanlshop.auth('/pages/user/order/order')">
					查看全部
					<image src="https://zm.zonmay.com/public/static/image/icons/arrow_right.png" alt="" />
				</div>
			</div>
			<view class="order-list">
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=1')" style="position:relative">
					<image src="https://zm.zonmay.com/public/static/image/icons/order2.png" alt="" />
					待支付
					<view class="cu-tag badge bg-orange" v-if="unpaid > 1 || unpaid == 1">
						{{$wanlshop.toFormat(unpaid, "hundred")}}
					</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=2')" style="position:relative">
					<image src="https://zm.zonmay.com/public/static/image/icons/order3.png" alt="" />
					待发货
					<view class="cu-tag badge bg-orange" v-if="unpend > 1 || unpend == 1">{{
                        $wanlshop.toFormat(unpend, "hundred")
                    }}</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=3')" style="position:relative">
					<image src="https://zm.zonmay.com/public/static/image/icons/order4.png" alt="" />
					待收货
					<view class="cu-tag badge bg-orange" v-if="pending > 1 || pending == 1">{{
                        $wanlshop.toFormat(pending, "hundred")
                    }}</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=4')" style="position:relative">
					<image src="https://zm.zonmay.com/public/static/image/icons/order5.png" alt="" />
					待评价
					<view class="cu-tag badge bg-orange" v-if="unevaluated > 1 || unevaluated == 1">{{
                        $wanlshop.toFormat(unevaluated, "hundred")
                    }}</view>
				</view>
			</view>
		</div>
		<div class="more">
			<div class="title">更多</div>
			<div class="more-list">
				<view @tap="$wanlshop.auth('/pages/user/collect')">
					<text class="wlIcon-cainixihuan wanl-orange"></text>
					我的收藏
				</view>
				<view @tap="$wanlshop.auth('/pages/user/coupon/list')">
					<text class="wlIcon-jiage wanl-text-red"></text>
					优惠券
				</view>
				<view @tap="$wanlshop.auth('/pages/user/comment/comment')">
					<text class="wlIcon-icon_pinglun wanl-text-red"></text>
					我的评价
				</view>
				<view @tap="$wanlshop.auth('/pages/user/address/address')">
					<text class="wlIcon-dizhi wanl-text-yellow"></text>
					我的地址
				</view>
				<view @tap="$wanlshop.auth('/pages/user/setting/user')">
					<text class="wlIcon-youhuiquantuangou wanl-text-red"></text>
					账号管理
				</view>
				<view @tap="$wanlshop.auth('/pages/user/address/receipt')">
					<text class="wlIcon-guanfang wanl-text-yellow"></text>
					我的发票
				</view>
				<view @tap="$wanlshop.auth('/pages/user/money/list')">
					<text class="wlIcon-jifen2 wanl-orange"></text>
					我的资金
				</view>
				<view @tap="$wanlshop.auth('/pages/user/money/recharge')">
					<text class="wlIcon-youhuiquantuangou wanl-orange"></text>
					余额充值
				</view>
				<view @tap="$wanlshop.auth('/pages/user/money/contact')">
					<text class="wlIcon-shezhi1 wanl-orange"></text>
					联系我们
				</view>
				<view @tap="$wanlshop.auth('/pages/user/money/gold')">
					<text class="wlIcon-baojiadan wanl-text-red"></text>
					我的金币
				</view>
				<view @tap="$wanlshop.auth('/pages/user/money/score')">
					<text class="wlIcon-youhuiquantuangou wanl-text-yellow"></text>
					我的积分
				</view>
				<view @tap="$wanlshop.auth('/pages/user/signin/signin')">
					<text class="wlIcon-qiandao wanl-orange"></text>
					每日签到
				</view>
			</div>
		</div>
		<div class="cell-group">
			<div class="cell-item borderBt" @tap="$wanlshop.auth('/pages/user/address/birthday')">
				<div class="title">亲人生日管理</div>
				<div class="right">
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
				</div>
			</div>
			<div class="cell-item borderBt" @tap="$wanlshop.to('/pages/user/help')">
				<div class="title">常见问题</div>
				<div class="right">
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
				</div>
			</div>
			<div class="cell-item borderBt" @tap="$wanlshop.auth('/pages/user/setting/setting')">
				<div class="title">常见设置</div>
				<div class="right">
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
				</div>
			</div>
			<div class="cell-item borderBt" @tap="wechatLogin">
				<div class="title">
					绑定微信
				</div>
				<div class="right">
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" mode="" />
				</div>
			</div>
			<!-- <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
				style="font-size:16px;margin:0;padding:0">
				<div class="cell-item">

					<div class="title">
						<image src="https://zm.zonmay.com/public/static/images/cell/9.png" mode="" />
						绑定微信
					</div>
					<div class="right">
						<image src="https://zm.zonmay.com/public/static/images/arrows-right.png" mode="" />
					</div>

				</div>
			</button> -->
		</div>

		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import ONavbar from "../components/o-navbar/index.vue";
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				token:'',
				unpaid: 0,
				unpend: 0,
				pending: 0,
				unevaluated: 0,
				unread_msg_num: 0,
				user_level_name: "",
				nickname:'',
				headerOpacity: 0,
				// 上拉刷新
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: "loading",
				contentText: {
					contentdown: " ",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
			};
		},
		computed: {
			...mapState(["user", "statistics", "common"]),
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShow() {
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.appStyle.user_font_color == "light" ? "#ffffff" :
						"#000000",
					backgroundColor: this.$store.state.common.appStyle.user_nav_color,
				});
			}, 200);
			this.token = uni.getStorageSync("wanlshop:user").token;
			
		},
		onLoad() {
			
			this.loadData();
		},
		onPageScroll(e) {
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = "loading";
				this.loadlikeData();
			}
		},
		methods: {
			onGetPhoneNumber(e) {
				// 注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log("用户点击了接受")
					console.log(e.detail);
					// 然后把code传到后端，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber接口，消费code来换取用户手机号。
					uni.request({
						url: "/api/login/wechatMobile",
						data: {
							code: e.detail.code,
							encrypted_data: e.detail.encryptedData,
							iv: e.detail.iv
						},
						method: "POST",
						success: (res) => {},
					});
				} else {
					console.log("用户点击了拒绝")
				}
			},
			//微信小程序登录
			wechatLogin() {
				// this.$loading();
				// this.$store.commit("logout");
				uni.login({
					success: loginRes => {
						
						console.log(loginRes)
						
						if (loginRes.code) {
							uni.getUserInfo({
								withCredentials: true,
								success: info => {
									
									console.log(info)

									uni.request({
										url: "/api/login/appBind",
										data: {
											code: loginRes.code,
											encrypted_data: info.encryptedData,
											iv: info.iv,
											raw_data: info.rawData,
											signature: info.signature,
											token:uni.getStorageSync("wanlshop:user").token
										},
										method: "POST",
										success: (res) => {
											uni.showToast({
												title:'绑定成功'
											})
										},
									});

								},
								fail: res => {
									uni.showmodal({
										title:res
									})
									console.log(res)
									
									if (res.errMsg == 'getUserInfo:cancel' || res.errMsg ==
										'getUserInfo:fail auth deny') {
										this.$refs.uToast.show({
											title: '请删除此小程序重新授权',
											type: 'error'
										});
									}
								}
							});
						}
					}
				});
			},
			async loadData() {
				console.log(this.$store.state.user);
				await uni.request({
					url: "/api/user/getUserInfo",
					data: {
						token: uni.getStorageSync("wanlshop:user").token,
					},
					method: "POST",
					success: (res) => {
						this.user_level_name = res.data.user_level_name;
						this.nickname = res.data.nickname;
						// this.unread_msg_num = res.data.unread_msg_num;
						// this.unread_msg_num = res.data.unread_msg_num;
						// this.unpaid = res.data.unpaid;
						// this.unpend = res.data.unpend;
						// this.pending = res.data.pending;
						// this.unevaluated = res.data.unevaluated;
						// this.afterService = res.data.afterService;
						// this.$store.commit("statistics/edit", res.data.statistics);
						// this.$store.commit("user/setUserInfo", res.data.userinfo);
					},
				});
				uni.stopPullDownRefresh();
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				await uni.request({
					url: "/wanlshop/product/likes?pages=user",
					data: {
						page: this.current_page,
					},
					success: (res) => {
						this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data
							.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? "noMore" : "more";
					},
				});
			},
			register() {
				console.log("----");
				this.$wanlshop.to(`/pages/user/auth/auth`);
			},
			// 帮助
			help() {
				this.$wanlshop.to("/pages/user/help");
			},
			// 设置
			setting() {
				this.$wanlshop.to("/pages/user/setting/setting");
			},
			portrai() {
				this.$wanlshop.to("/pages/user/portrait/portrait");
			},
		},
		components: {
			ONavbar,
		},
	};
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;

		.page-header {
			background: #214a75;
			height: 230rpx;
			box-sizing: border-box;
			position: relative;

			.news-tip {
				position: absolute;
				right: 15px;
				top: 9px;
			}

			.news-wraper image {
				width: 22px;
				height: 22px;
			}

			.red-tips {
				position: absolute;
				right: 0px;
				top: 0px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: rgba(251, 0, 0, 1);
			}

			.info {
				z-index:9999;
				position: absolute;
				bottom: 0;
				width: 90%;
				height: 150rpx;
				background: #fff;
				bottom: -100rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				box-shadow: 0px 12px 26px 0px rgba(0, 0, 0, 0.06);

				.user {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 90%;
					position: relative;
					width: 80%;

					.arrow {
						position: absolute;
						top: 50%;
						right: 20rpx;
						transform: translateY(-50%);

						image {
							width: 25px;
							height: 25px;
						}
					}
				}

				.login {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					height: 90%;
					position: relative;
					width: 80%;

					.arrow {
						position: absolute;
						top: 50%;
						right: 20rpx;
						transform: translateY(-50%);

						image {
							width: 25px;
							height: 25px;
						}
					}
				}

				.via {
					width: 108rpx;
					height: 108rpx;
					background: #214a75;
					background-size: contain;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}
	}

	.more {
		margin-top: 20rpx;
		padding: 10rpx;
		background: #fff;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			color: #4d4d4d;
			padding-left: 30rpx;
			font-weight: 600;
		}

		&-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10rpx;
			box-sizing: border-box;

			view {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				font-size: 24rpx;

				text {
					font-size: 70rpx;
				}
			}
		}
	}

	.order {
		background: #fff !important;
		padding: 120rpx 20rpx 20rpx 20rpx;

		&-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 20px;

			>view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #4d4d4d;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.cell-group {
		background: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.cell-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		background: #fff;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #404040;
		}

		.right {
			color: #333;
			display: flex;
			align-items: center;

			image {
				width: 20rpx;
				height: 35rpx;
			}
		}
	}

	.borderBt {
		border-bottom: 1rpx solid #e6e6e6;
	}

	.more-list {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		view {
			width: 25%;
		}
	}
</style>